<template>
  <div class="app-container" style="padding-top: 5px;">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="项目标段" prop="institutionCode">
        <el-select
          v-model="queryParams.institutionCode"
          placeholder="请选择"
          size="small"
          style="width: 240px" @change="handleBidChange"
        >
          <el-option-group
            v-for="group in bidOptions"
            :key="group.name"
            :label="group.name">
            <el-option
              v-for="item in group.bids"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="idNo">
        <el-input
          v-model="queryParams.idNo"
          placeholder="身份证号/姓名"
          clearable
          size="small"
          style="width: 240px;padding-top: 3px;"
        >
          <el-button size="small" slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>

      </el-form-item>

      <el-form-item label="在岗状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择在岗状态"
          clearable
          size="small"
          style="width: 240px" @change="handleStatusChange"
        >
          <el-option
            v-for="dict in dict.type.labour_staff_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" plain icon="el-icon-search" @click="visible = true" size="mini" >更多</el-button>
      </el-form-item>

    </el-form>

    <div>
      <el-drawer
        title="更多查询条件"
        :visible.sync="visible"
        size="40%"
        direction="rtl"
      >
        <div style="padding-top: 5px;">
          <el-form :model="moreQueryParams" ref="moreQueryForm" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="性　　别" prop="sex">
                  <el-select v-model="moreQueryParams.sex" clearable placeholder="请选择性别" style="width: 250px;">
                    <el-option
                      v-for="dict in dict.type.sys_user_sex"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="民　　族" prop="nation">
                  <el-select
                    v-model="moreQueryParams.nation"
                    clearable
                    placeholder="请选择民族"
                    style="width: 240px;">
                    <el-option
                      v-for="item in nationOptions"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="籍　　贯">
                  <el-select v-model="moreQueryParams.nativePlace" clearable placeholder="请选择籍贯" style="width: 250px;">
                    <el-option
                      v-for="item in provinceOptions"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="学　　历">
                  <el-select v-model="moreQueryParams.degreeName" clearable placeholder="请选择学历" style="width: 250px;">
                    <el-option
                      v-for="dict in dict.type.sys_degree_name"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="年　　龄">
                  <el-input type="number" v-model="moreQueryParams.age1" clearable placeholder=">=此值" style="width: 119px;"/> -
                  <el-input type="number" v-model="moreQueryParams.age2" clearable placeholder="<=此值" style="width: 119px;"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="政治面貌">
                  <el-select v-model="moreQueryParams.politicalStatus" clearable placeholder="请选择政治面貌" style="width: 250px;">
                    <el-option
                      v-for="dict in dict.type.sys_political_status"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="施工队伍">
                  <el-select clearable filterable
                    v-model="moreQueryParams.battalionId"
                    placeholder="请选择施工队伍"
                    style="width: 250px;">
                    <el-option
                      v-for="item in battalionOptions"
                      :key="item.battalionId"
                      :label="item.battalionName"
                      :value="item.battalionId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="施工班组">
                  <el-select clearable filterable
                    v-model="moreQueryParams.teamId"
                    placeholder="请选择施工班组"
                    style="width: 250px;">
                    <el-option
                      v-for="item in teamOptions"
                      :key="item.teamId"
                      :label="item.teamName"
                      :value="item.teamId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="岗位工种">
                  <el-select clearable filterable
                    v-model="moreQueryParams.postId"
                    placeholder="请选择岗位工种"
                    style="width: 250px;">
                    <el-option
                      v-for="item in postOptions"
                      :key="item.postId"
                      :label="item.postName"
                      :value="item.postId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="班组长">
                  <el-select v-model="moreQueryParams.isMonitor" clearable placeholder="请选择班组长" style="width: 250px;">
                    <el-option
                      v-for="dict in dict.type.sys_yes_no"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="进场日期">
                  <el-date-picker
                    v-model="moreQueryParams.enterDate"
                    type="daterange"
                    style="width: 250px;"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="退场日期">
                  <el-date-picker
                    v-model="moreQueryParams.exitDate"
                    type="daterange"
                    style="width: 250px;"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer" style="display:flex;align-items:center;justify-content:center">
            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
          </div>
        </div>
      </el-drawer>
    </div>

    <i-frame :src="reportUrl"/>

  </div>
</template>

<script>
  import { initStaffView } from "@/api/site/labour/report";
  import iFrame from "@/components/iFrame/index";
  import { dropDownList as battalionDropDownList } from "@/api/site/labour/battalion";
  import { dropDownList as teamDropDownList } from "@/api/site/labour/team";
  import { dropDownList as postDropDownList } from "@/api/site/labour/post";

  export default {
    name: "ReportStaff",
    components: { iFrame },
    dicts: ['labour_staff_status', 'sys_user_sex', 'sys_degree_name','sys_political_status', 'sys_yes_no'],
    data() {
      return {
        // 查询参数
        queryParams: {
          reportUrl: null,
          institutionCode: null,
          idNo: '',
          status: '',

        },
        moreQueryParams: {
          sex: '',
          nation: '',
          nativePlace: '',
          degreeName: '',
          age1: '',
          age2: '',
          politicalStatus: '',
          battalionId: '',
          teamId: '',
          postId: '',
          isMonitor: '',
          enterDate: '',
          exitDate: '',
        },
        // 标段下拉框
        bidOptions:[],
        battalionOptions: [],
        teamOptions: [],
        postOptions: [],
        nationOptions: [],
        provinceOptions: [],
        reportUrl: "",
        visible: false,
      }
    },
    props: {
      className: {
        type: String,
        default: "drawerClass",
      },
    },
    created() {
      document.title = this.$route.query.reportName;
      this.queryParams.reportUrl = this.$route.query.reportUrl;
      this.queryParams.institutionCode = this.$route.query.institutionCode;
      this.init();
    },
    methods: {
      /** 初始化标段下拉框 */
      init() {
        initStaffView({
          institutionCode: this.queryParams.institutionCode,
          reportType: this.reportType}).then(response => {
          this.bidOptions = response.bids;
          this.battalionOptions = response.battalions;
          this.teamOptions = response.teams;
          this.postOptions = response.posts;
          this.nationOptions = response.nations;
          this.provinceOptions = response.provinces;
          this.loadReport();
        });
      },
      // 标段下拉框发生变化
      handleBidChange() {
        this.loadBattalion();
        this.loadTeam();
        this.loadPost();
        this.loadReport();
      },
      // 加载施工队伍
      loadBattalion() {
        battalionDropDownList({institutionCode: this.queryParams.institutionCode}).then(response => {
          this.battalionOptions = response.battalions;
        });
      },
      loadTeam() {
        teamDropDownList({institutionCode: this.queryParams.institutionCode}).then(response => {
          this.teamOptions = response.teams;
        });
      },
      loadPost() {
        postDropDownList({institutionCode: this.queryParams.institutionCode}).then(response => {
          this.postOptions = response.posts;
        });
      },
      // 状态下拉框发生改变
      handleStatusChange() {
        this.loadReport();
      },
      // 身份证姓名查询
      handleSearch() {
        this.loadReport();
      },
      // 查询按钮
      handleQuery() {
        this.loadReport();
      },
      // 重置查询表单
      resetQuery() {
        this.moreQueryParams = {
          sex: '',
          nation: '',
          nativePlace: '',
          degreeName: '',
          age1: '',
          age2: '',
          politicalStatus: '',
          battalionId: '',
          teamId: '',
          postId: '',
          isMonitor: '',
          enterDate: '',
          exitDate: '',
        }
        this.loadReport();
      },
      // 加载报表
      loadReport() {
        let url = "";
        if (this.queryParams.institutionCode == undefined) {
          this.reportUrl = url;
        } else {
          let d1 = '', d2 = '', d3 = '', d4 = '';
          if (this.moreQueryParams.enterDate) {
            d1 = this.parseTime(this.moreQueryParams.enterDate[0], '{y}-{m}-{d}');
            d2 = this.parseTime(this.moreQueryParams.enterDate[1], '{y}-{m}-{d}');
          }
          if (this.moreQueryParams.exitDate) {
            d3 = this.parseTime(this.moreQueryParams.exitDate[0], '{y}-{m}-{d}');
            d4 = this.parseTime(this.moreQueryParams.exitDate[1], '{y}-{m}-{d}');
          }
          url = this.queryParams.reportUrl
            + "&institutionCode=" + this.queryParams.institutionCode
            + "&idNo=" + this.queryParams.idNo
            + "&status=" + this.queryParams.status
            + "&sex=" + this.moreQueryParams.sex
            + "&nation=" + this.moreQueryParams.nation
            + "&nativePlace=" + this.moreQueryParams.nativePlace
            + "&degreeName=" + this.moreQueryParams.degreeName
            + "&age1=" + this.moreQueryParams.age1
            + "&age2=" + this.moreQueryParams.age2
            + "&politicalStatus=" + this.moreQueryParams.politicalStatus
            + "&battalionId=" + this.moreQueryParams.battalionId
            + "&teamId=" + this.moreQueryParams.teamId
            + "&postId=" + this.moreQueryParams.postId
            + "&isMonitor=" + this.moreQueryParams.isMonitor
            + "&d1=" + d1
            + "&d2=" + d2
            + "&d3=" + d3
            + "&d4=" + d4
            + "&__bypagesize__=false";
          this.reportUrl = url;
        }
      }
    }
  }
</script>

<style lang="scss">
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type='number'] {
    -moz-appearance: textfield;
  }
</style>

